<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <div>
          姓名：
          <el-input
            v-model="search.truename"
            class="handle-select mr10"
            placeholder="请输入内容"
          ></el-input>

          <el-button type="primary" icon="el-icon-search" @click="getdata"
            >查询</el-button
          >
          <el-button type="primary" class="el-icon-plus" @click="add"
            >新增</el-button
          >
        </div>
      </div>

      <el-table :data="tableData" border class="table" ref="multipleTable">
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>

        <el-table-column prop="truename" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="头像">
          <template scope="scope">
            <template v-if="scope.row.imgurl == '' || scope.row.imgurl == null">
              <img
                src="../../../assets/img/wu.png"
                width="40"
                height="40"
                v-image-preview
              />
            </template>
            <template v-else>
              <img
                :src="scope.row.imgurl"
                width="40"
                height="40"
                v-image-preview
              />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="cardid" label="身份证号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>

        <el-table-column prop="isdel" label="删除状态">
          <template scope="scope">
            <span v-if="scope.row.isdel == '0'">未删除</span>
            <span v-if="scope.row.isdel == '1'">已删除</span>
          </template>
        </el-table-column>
        <el-table-column label="功能操作" width="200" align="center">
          <template scope="scope">
            <el-button type="text" @click="handlexiu(scope.$index, scope.row)"
              >更改状态</el-button
            >
            <el-button type="text" @click="tongbu(scope.row)"
              >同步数据</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <!-- :formatter="formatter" -->
        <!-- :formatter="formatter" -->
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          layout="prev, pager, next,jumper"
          :total="allcount"
          :page-size="search.size"
          :current-page.sync="search.page"
        ></el-pagination>
      </div>
    </div>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹出框 -->
    <el-dialog title="新增" :visible.sync="addVisible" width="30%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="addobj.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="addobj.cardid"
            @change="cardNext(addobj.cardid)"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            :action="uploadimg"
            :on-success="uploadok2"
            multiple
            :limit="3"
            list-type="picture"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改提示框 -->
    <el-dialog title="提示" :visible.sync="editVisible" width="30%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="删除状态">
          <el-select v-model="editobj.isdel">
            <el-option
              v-for="item in listData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import JsZip from "jszip";
export default {
  name: "basetable",
  data() {
    return {
      url: "./vuetable.json",
      tableData: [],
      display: false,
      multipleSelection: [],
      select_cate: "",
      select_word: "",
      del_list: [],
      is_search: false,
      addVisible: false,
      editVisible: false,
      delVisible: false,
      delleteVisible: false,
      uploadimg: "",
      idx: -1,
      search: {
        page: 1,
        size: 10,
        isdel: "0",
      },
      obj: {},
      listData: [
        { id: "", name: "全部" },
        { id: "0", name: "未删除" },
        { id: "1", name: "已删除" },
      ],
      addobj: {},
      editobj: {},
      allcount: 0,
      count: 0,
      sexlist: [
        { name: "男", id: 1 },
        { name: "女", id: 2 },
      ],
      fileList: [],
    };
  },
  created() {
    this.uploadimg = this.$uploadapi;
    this.getdata();
  },
  methods: {
   
    tongData() {
      this.$axios
        .post(this.$api + "admin/face/push", { mid: this.$route.query.mid })
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success("同步成功");
            this.getdata();
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    add() {
      this.addVisible = true;
    },
    insert() {
      this.addobj.mid = this.$route.query.mid;
      this.addobj.mcode = this.$route.query.mcode;
      this.addobj.type = 1;
      this.$axios
        .post(this.$api + "admin/face/add", this.addobj)
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success(res.data.message);
            this.getdata();
          } else {
            this.$message.error(res.data.message);
          }
          this.addVisible = false;
          this.addobj.name = "";
          this.addobj.cardid = "";
        });
    },
    uploadok2(response, file, fileList) {
      this.addobj.imgurl = response.data;
    },
    // 分页导航
    handleCurrentChange(val) {
      this.search.page = val;
      this.getdata();
    },
    // 获取 easy-mock 的模拟数据
    getdata() {
      // 开发环境使用 easy-mock 数据，正式环境使用 json 文件

      this.$axios
        .post(this.$api + "admin/face/list", this.search)
        .then((res) => {
          this.tableData = res.data.data.list;
          this.allcount = res.data.data.allcount;
          this.count = res.data.data.count;
        });
    },
    pickerOptions() {},
    handleDelete(index, row) {
      this.idx = index;
      this.editobj = row;
      this.delVisible = true;
    },
    handlexiu(index, row) {
      this.editobj = { ...row };
      this.editVisible = true;
      this.listData.forEach((element) => {
        if (this.editobj.isdel == element.id) {
          this.editobj.isdel = element.name;
        }
      });
    },
    handleDele(index, row) {
      this.idx = index;
      this.editobj = row;
      this.delleteVisible = true;
    },
    update() {
      this.$axios.post(this.$api + "person/edit", this.editobj).then((res) => {
        if (res.data.status == 200) {
          this.$message.success(res.data.message);
        } else {
          this.$message.error(res.data.message);
        }
        this.getData();
        this.editVisible = false;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteRow() {
      this.$axios
        .post(this.$api + "admin/person/del", this.editobj)
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success(res.data.message);
            this.getData();
          } else {
            this.$message.error(res.data.message);
          }
          this.delVisible = false;
        });
    },
    uploadok1(response, file, fileList) {
      var name = file.name;
      name = name.substring(0, name.indexOf("."));
      var deviceid = this.$route.query.deviceid;
      var mcode = this.$route.query.mcode;
      var mid = this.$route.query.mid;
      this.$axios
        .post(this.$api + "admin/face/add", {
          imgurl: response.data,
          name: name,
          deviceid: deviceid,
          mcode: mcode,
          type: 1,
          mid: mid,
        })
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success(res.data.message);
            this.getData();
          } else {
            this.$message.error(res.data.message);
          }
          this.delVisible = false;
        });
    },
    handleChange(file, fileList) {
      console.log("dddd", file);
      this.fileTemp = file.raw;
      this.handleExceed();
    },
    handleExceed: function () {
      console.log("ss");
      console.log("this.fileTemp", this.fileTemp.type);
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>
